import styled from 'styled-components';
import React, { CSSProperties, useEffect, useState, useCallback } from 'react';
import { Card, Tabs, Button } from 'antd';
import type { TabsProps } from 'antd';
import {
    FooterToolbar,
    PageContainer,
    ProForm,
    ProFormDateRangePicker,
    ProFormDigit,
    ProFormRadio,
    ProFormSelect,
    ProFormItem,
    ProFormText,
    ProFormTextArea,
    ProFormUploadButton,
    ProLayout,
} from '@ant-design/pro-components';

import { ToolsHeader, CategoryList, QiniuFileUpload, Tags } from '../../components';
import { localSharingGetSharedObject, localSharingSaveSharedObject, SharedObject, sharingCreateSharedObject, sharingUpdateSharedObject } from '../../services';
import { getNowFormatDate, uuid } from '../../utils';
import { BindSharedPanel } from './bind-shared-panel';

export interface SharedObjectEditorProps {
    style?: CSSProperties;
    item: SharedObject;
    onFinish: () => Promise<void> | void;
}

export const SharedObjectEditor: React.FC<SharedObjectEditorProps> = (props) => {

    const [loading, setLoading] = useState<boolean>(false);

    const [icon, setIcon] = useState<Array<string>>([]);

    const [objectTags, setObjectTags] = useState<Array<string>>(['模型设计']);

    const requestCallback = useCallback(async () => {
        if (!props.item) return {};
        if (props.item.icon && props.item.icon.length > 0) {
            setIcon([props.item.icon]);
        }
        if (props.item.tags && props.item.tags.length > 0) {
            setObjectTags(props.item.tags);
        }
        return props.item;
    }, [props.item]);

    return (
        <Container style={props.style}>
            <ProForm<SharedObject>
                style={{
                    width: '100%'
                }}
                request={requestCallback}
                onFinish={async (values) => {
                    //TODO 校验
                    let name = values.name;
                    if (!name || name.length <= 0 || name === '') {
                        return;
                    }
                    let obj = {
                        identifier: props.item.identifier,
                        name: name,
                        icon: icon && icon.length > 0 ? icon[0] : '',
                        tags: objectTags,
                        description: values.description ? values.description : '',
                    };
                    console.log(values, obj);
                    let res = await sharingUpdateSharedObject(obj);
                    console.log(res);
                    await props.onFinish();
                }}
                submitter={false}
            >
                <ProFormText
                    rules={[{ required: true }]}
                    width="xl" fieldProps={{}} name="name" label="名称" />
                <ProFormItem
                    extra="只能上传jpg/png文件,且不大于1MB"
                    label="图标"
                    name="icon">
                    <QiniuFileUpload
                        title={'上传图标'}
                        listType={'picture-card'}
                        accept={"image/png, image/jpeg"}
                        max={1}
                        values={icon}
                        isPicture={true}
                        filePath={`g01/shared/images/${getNowFormatDate('')}`}
                        onChange={async (files) => {
                            setIcon(files);
                        }}></QiniuFileUpload>
                </ProFormItem>
                <ProFormItem
                    label="标签"
                    name="domainTags">
                    <Tags value={objectTags} onChange={(value) => {
                        setObjectTags(value);
                    }}></Tags>
                </ProFormItem>
                <ProFormTextArea width="xl" fieldProps={{ rows: 6 }} label="描述" name="description" />
                <ProFormItem>
                    <Button type="primary" htmlType="submit">
                        保存
                    </Button>
                </ProFormItem>
            </ProForm>
        </Container>
    );
}


const Container = styled.div`
    width: 100%;
    height: 100%;
    padding: 6px 6px;
    gap: 10px;
`;
